window.addEventListener('load', function () {

    var map = document.querySelector('.map');
    var s1 = document.querySelector('.s1');



    var shanghai = document.querySelector('.shanghai ');
    var beijing = document.querySelector('.beijing');
    var zhuhai = document.querySelector('.zhuhai');
    var shenzhen = document.querySelector('.shenzhen');
    var xiamen = document.querySelector('.xiamen');
    var shantou = document.querySelector('.shantou');

    var s1_top = s1.offsetTop;
    var map1_bartop = map.offsetTop - s1_top;
    console.log("s1_top是" + s1_top);





    document.addEventListener('scroll', function () {
        console.log("map1_bartop是" + map1_bartop);
        if (window.pageYOffset >= s1_top) {
            map.style.position = 'fixed';
            map.style.top = 100 + 'px';

        }

        else {
            map.style.position = 'absolute';
            map.style.top = map1_bartop + s1_top + 'px';
            console.log("这是隐藏了：" + window.pageYOffset);
        }

        if (window.pageYOffset >= 800) {
            beijing.style.display = "block";
            shanghai.style.display = "none";
            if (window.pageYOffset >= 1200) {
                beijing.style.display = "none";
                zhuhai.style.display = "block";
                shenzhen.style.display = "block";
                xiamen.style.display = "block";
                shantou.style.display = "block";
            }
        }
        else
            if (window.pageYOffset < 1300) {
                zhuhai.style.display = "none";
                shenzhen.style.display = "none";
                xiamen.style.display = "none";
                shantou.style.display = "none";
                if (window.pageYOffset < 800) {
                    beijing.style.display = "none";
                    shanghai.style.display = "block";

                }


            }





    })





})